<template>
	<view>
		<u-navbar :title="title" :bgColor="bgcolor" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="note">

		</view>

		<view class="" style="position: relative;">
			<view class="flex" style="padding: 15px 0;  justify-content: space-around">
				<view @click="btn(it.id)" :class="current == it.id ? 'ipo' : ''"
					style="color: #747777; font-size: 16px; text-align: center" v-for="(it, i) in arr" :key="i">
					{{ it.name }}
					<view v-if="current == it.id" class="flex"
						style="width: 13px;height: 2px;background: #2447FF;border-radius: 42px 42px 42px 42px;justify-content: center;margin-top: 10px;">
					</view>
					<view v-else class="flex" style="margin-top: 10px;">
					</view>
				</view>
			</view>

			<view style="padding: 0px 15px">
				<!-- <u-sticky offset-top="0"> -->
				<view class="flex" style="padding: 11px 0px; justify-content: space-between;">
					<view style="font-size: 16px; font-weight: bold; color: #1d1f20">项目：{{ project_info.title }}</view>
					<uni-datetime-picker returnType="timestamp" signname="timestamp " @change="change" v-model="range"
						@maskClick="maskClick" type="daterange">
						<text @click="shoowo">时间筛选</text>
					</uni-datetime-picker>
				</view>
				<u-search @search="search" @custom="search" bgColor="#fff" :showAction="true" actionText="搜索"
					v-model="name" :animation="true"></u-search>
				<!-- </u-sticky> -->
				<view style="margin-top: 15px">
					<view v-for="(it, index) in listdata" :key="index"
						style="padding: 15px; border-radius: 10px; background-color: #fff; position: relative; margin-bottom: 15px">
						<view class="flex">
							<image style="width: 30px; margin-right: 12px; border-radius: 10px"
								:src="imgurl + it.project.logo_image" mode="widthFix"></image>
							<view style="font-size: 14px">{{ it.project.title }}</view>
						</view>
						<view class="flex" style="background-color: #FCFCFC;padding: 20px 15px;flex-direction: column;border: 1px solid #D3D3D3;align-items: flex-start;
						margin: 8px 0 14px;border-radius: 8px;">
							<view class="flex" style="justify-content: space-between;width: 100%;">
								<view style="font-size: 14px;color: #333333;">姓名：{{ it.apply_name }}</view>
								<view style="font-size: 14px;color: #333333;">交单时间：{{ it.createtime }}</view>
							</view>
							<view style="margin-top: 10px; font-size: 14px;color: #333333;">订单编号：{{ it.submit_no }}
							</view>
						</view>
						<view class="flex" style="margin-top: 10px">
							<view style="font-size: 14px">交单详情：</view>
							<view @click="ckan(it)" style="font-size: 14px; color: #FF8040">查看详情</view>
						</view>
						<view :class="it.check_status == 0 ? 'dsh' : it.check_status == 1 ? 'dsh1' : 'dsh2'" style="">
							{{ it.status_text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="20" @close="show = false" :closeable="true">
			<view class="sh-com" style="padding: 15px; min-width: 290px; max-width: 300px;">
				<view style="font-size: 16px; font-weight: bold; color: #1d1f20; text-align: center">交单详情</view>
				<view style="margin-top: 15px">
					<view class="flex" v-for="(it, i) in ck_info.data" :key="i" style="padding-top: 15px">
						<view style="font-size: 14px; color: #777979; width: 90px">{{ it.key }}：</view>
						<view style="color: #1d1f20; font-size: 14px">{{ it.value }}</view>
					</view>

					<view style="margin-top: 15px" v-if="ck_info.images != ''">
						<view style="font-size: 14px; color: #777979; width: 90px">交单图片：</view>
						<view class="flex" style="margin-top: 12px; flex-wrap: wrap">
							<image @click="yulan(it)" v-for="(it, i) in ck_info.images" :key="i"
								style="width: 80px; height: 80px; border-radius: 10px; margin-right: 15px; margin-bottom: 15px"
								:src="it.value" mode=""></image>
						</view>
					</view>
					<view class="flex" style="" v-if="ck_info.status == 2">
						<view style="font-size: 14px; color: #FF8040; width: 90px">不通过原因：</view>
						<view style="color: #FF8040; font-size: 14px">{{ ck_info.reason }}</view>
					</view>
					<view @click="show = false" class="flex" style="
							width: 255px;
							height: 40px;
							border-radius: 20px;
							font-size: 14px;
							font-weight: 400;
							color: #fff;
							margin: 30px auto 0;
							justify-content: center;
							background-color: #2447FF;
						">
						返回
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				show: false,
				range: [],
				current: -1,
				arr: [{
						name: '全部',
						id: -1,
					},
					{
						name: '待审核',
						id: 0,
					},
					{
						name: '已通过',
						id: 1,
					},
					{
						name: '不通过',
						id: 2,
					},
				],
				id: '',
				name: '',
				timestart: '',
				timend: '',
				project_info: '',
				listdata: [],
				imgurl: config.imgurl,
				ck_info: '',
				time: '',
				bgcolor: 'rgba(255,255,255,0)',
				title: '项目交单记录'
			};
		},
		onLoad(e) {
			this.id = e.id;
			this.name = e.name;
			this.list();
			this.info();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgcolor = 'rgba(255,255,255,1)'
			} else {
				this.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		onShow() {
			uni.$on('update', this.times);
		},
		methods: {
			shoowo() {
				uni.$emit('qieh', {
					msg: 0,
				});
			},
			yulan(e) {
				let a = [];
				a.push(e.value);
				uni.previewImage({
					urls: a,
					loop: true,
				});
			},
			times(e) {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				date.setMonth(month);
				date.setDate('1');
				// 获取本月最后一天
				let dd = date.setDate(date.getDate() - 1);
				let els = uni.$u.timeFormat(dd, 'yyyy-mm-dd');

				this.timestart = '';
				this.timend = '';
				let that = this;
				if (e.msg.name == '今日') {
					that.time = 'today';
					this.dzrq = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else if (e.msg.name == '昨日') {
					that.time = 'yesterday';
					this.dzrq = year + '-' + month + '-' + day + '至' + year + '-' + month + '-' + (day - 1);
				} else {
					that.time = 'month';
					this.dzrq = year + '-' + month + '-' + '01' + '至' + els;
				}
				that.list();
			},
			async ckan(e) {
				let res = await this.$http.index.sumbitInfo({
					sumbit_id: e.id,
				});
				if (res.code == 1) {
					this.ck_info = res.data;
					console.log(this.ck_info.images[0] == '');
					this.show = true;
				}
			},
			async info() {
				let res = await this.$http.car.projectInfo({
					project_id: this.id,
				});
				if (res.code == 1) {
					this.project_info = res.data.project;
				}
			},
			async list() {
				let res = await this.$http.index.submitList({
					project_id: this.id,
					status: this.current,
					timestart: this.timestart,
					timend: this.timend,
					search: this.name,
					time: this.time,
				});
				if (res.code == 1) {
					this.listdata = res.data;
				}
			},
			search() {
				this.list();
			},
			change(e) {
				this.time = '';
				this.timestart = e[0] / 1000;
				this.timend = e[1] / 1000;
				this.list();
			},
			btn(i) {
				this.current = i;
				this.list();
			},
			maskClick(e) {},
		},
	};
</script>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>

<style scoped lang="scss">
	/deep/ .u-sticky {
		z-index: 10 !important;
	}

	/deep/.uni-date {
		padding: 5px 0px;
		background: #2447FF;
		border-radius: 15px;
		font-size: 14px;
		color: #ffffff;
		width: 96px !important;
		flex: none;
		text-align: center;
	}

	.ipo {
		color: #2447FF !important;
		font-weight: bold;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.dsh {
		position: absolute;
		right: 15px;
		top: 15px;
		// background-color: #3176ff;
		// padding: 4px 10px;
		border-radius: 0px 10px 0px 10px;
		font-size: 12px;
		color: #FF8040;
		font-weight: 400;
	}

	.dsh1 {
		position: absolute;
		right: 15px;
		top: 15px;
		// background-color: #e8e8e8;
		// padding: 4px 10px;
		// border-radius: 0px 10px 0px 10px;
		font-size: 12px;
		color: #33BC1B;
		font-weight: 400;
	}

	.dsh2 {
		position: absolute;
		right: 15px;
		top: 15px;
		// background-color: #ff3331;
		// padding: 4px 10px;
		// border-radius: 0px 10px 0px 10px;
		font-size: 12px;
		color: #FF3331;
		font-weight: 400;
	}


	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		top: 0;
	}

	.sh-com {
		background-image: url('@/static/font/22.png');
		height: 391px;
		background-size: 100% 100%;
	}
</style>